<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-form size="small" label-width="80px" style="margin-bottom: 16px;">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" style="height: 36px;">
              <el-form-item label="业务日期">
                <div class="flex flex-row">
                  <el-date-picker
                    v-model="dataForm.startDate"
                    align="right"
                    unlink-panels
                    class="fl1"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期"
                    style="width: 100%;"
                  />
                  <el-date-picker
                    v-model="dataForm.endDate"
                    align="right"
                    unlink-panels
                    class="fl1"
                    value-format="yyyy-MM-dd"
                    placeholder="结束日期"
                    style="width: 100%;"
                    :disabled="!dataForm.startDate"
                    :pickerOptions="pickerOptions"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="促销名称">
                <table-select
                  :tableColumns="[{prop:'code',label:'编码',width:'100'},{prop:'name',label:'名称',width: '280'}]"
                  labelKey="name"
                  valueKey="id"
                  :value.sync="dataForm.promotionIds"
                  placeholder="请选择"
                  url="/api/salesPromotion"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户群类型">
                <v-select
                  v-model="dataForm.customerGroupType"
                  :options="dict.t_sales_promotion_customer_group_type"
                  placeholder="客户群类型"
                  style="line-height: 1;"
                  @change="dataForm.customerGroupIds=null"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户" v-if="dataForm.customerGroupType == 2" key="basCustomerList">
                <zSelect
                  multiple
                  :value.sync="dataForm.customerGroupIds"
                  url="api/dropDown/basCustomerList"
                  style="width: 100%;line-height: 1;"
                />
              </el-form-item>
              <el-form-item label="客户分类" v-if="dataForm.customerGroupType == 3" key="basCustomerTypeTree">
                <v-tree-select
                  v-model="dataForm.customerGroupIds"
                  placeholder="客户分类"
                  url="api/dropDown/basCustomerTypeTree"
                  multiple
                  value-consists-of="ALL_WITH_INDETERMINATE"
                  style="width: 100%;height: 36px;"
                />
              </el-form-item>
              <el-form-item label="客户区域" v-if="dataForm.customerGroupType == 4" key="basCustomerAreaTree">
                <v-tree-select
                  v-model="dataForm.customerGroupIds"
                  placeholder="客户区域"
                  url="api/dropDown/basCustomerAreaTree"
                  multiple
                  value-consists-of="ALL_WITH_INDETERMINATE"
                  style="width: 100%;height: 36px;"
                />
              </el-form-item>
              <el-form-item label="销售体系" v-if="dataForm.customerGroupType == 5" key="basSaleSystemList">
                <zSelect
                  multiple
                  :value.sync="dataForm.customerGroupIds"
                  url="api/dropDown/basSaleSystemList"
                  style="width:  100%"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="促销类型">
                <v-select
                  v-model="dataForm.promotionType"
                  :options="dict.t_sales_promotion_type"
                  placeholder="促销类型"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-button class="filter-item" size="mini" type="primary" @click="doQuery">搜索</el-button>
              <el-button class="filter-item" size="mini" type="primary" plain @click="doReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-button
          :loading="downloadLoading"
          class="filter-item"
          size="mini"
          type="warning"
          @click="doExport"
        >
          导出
        </el-button>
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        border
        v-loading="loading"
        :data="tableData"
        size="small"
        height="700"
        style="width: 100%;"
        @row-dblclick="dblclick"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="业务日期" prop="busDate" />
        <el-table-column label="促销名称" prop="promotionName" />
        <el-table-column label="客户群类型" prop="customerGroupType" width="140" />
        <el-table-column label="客户名称" prop="customerGroupName" />
        <el-table-column label="促销类型" prop="promotionType" />
        <el-table-column label="次数" prop="orderCount" />
        <el-table-column label="促销数量" prop="promotionCount" />
        <el-table-column label="促销箱数" prop="promotionBoxCount" />
        <el-table-column label="促销金额" prop="promotionAmount" />
      </el-table>
      <!--分页组件-->
      <pagination :page.sync="query.page" :limit.sync="query.size" :total="total" @pagination="initData" />
    </div>
  </div>
</template>

<script>
import { queryAll } from '@/api/erp/reportSalePromotion'
import { download } from '@/api/data'
import { downloadFile } from '@/utils'
import Pagination from '@/components/Pagination'
import VSelect from '@/components/VSelect'
import VTreeSelect from '@/components/VTreeSelect'

const customerGroupTypeMap = {
  '全体客户': 1,
  '单一客户': 2,
  '客户分类': 3,
  '客户区域': 4,
  '销售体系': 5
}

const defaultForm = {
  startDate: null,
  endDate: null,
  promotionIds: null,
  customerGroupType: null,
  customerGroupIds: null,
  promotionType: null
}

export default {
  name: 'reportSalePromotion',
  components: {
    Pagination,
    VSelect,
    VTreeSelect
  },
  dicts: ['t_sales_promotion_customer_group_type', 't_sales_promotion_type'],
  data() {
    return {
      loading: false,
      downloadLoading: false,
      tableData: [],
      total: 0,
      dataForm: Object.assign({}, defaultForm),
      prevForm: Object.assign({}, defaultForm),
      query: {
        page: 1,
        size: 10
      }
    }
  },
  computed: {
    pickerOptions() {
      const startTime = this.dataForm.startDate
      return {
        disabledDate(time) {
          return time.getTime() < new Date(startTime).getTime() - 3600 * 1000 * 24
        }
      }
    }
  },
  activated() {
    // this.initData()
  },
  methods: {
    doQuery() {
      this.prevForm = Object.assign({}, defaultForm, this.dataForm)
      this.query.page = 1
      this.initData()
    },
    doReset() {
      this.prevForm = Object.assign({}, defaultForm)
      this.dataForm = Object.assign({}, defaultForm)
      this.initData()
    },
    initData() {
      this.loading = true
      const { customerGroupType, customerGroupIds } = this.dataForm
      const data = Object.assign({}, this.dataForm, this.query, {
        customerGroupIds: [3, 4].includes(+customerGroupType) ? (customerGroupIds || []).join() : customerGroupIds
      })
      queryAll(data).then((res) => {
        this.tableData = res.data.content
        this.total = res.data.totalElements
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    doExport() {
      this.downloadLoading = true
      const { customerGroupType, customerGroupIds } = this.dataForm
      const data = Object.assign({}, this.dataForm, this.query, {
        customerGroupIds: [3, 4].includes(customerGroupType) ? (customerGroupIds || []).join() : customerGroupIds
      })
      download('/api/reportPromotion/export', data).then(result => {
        downloadFile(result, '促销报表数据', 'xlsx')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    dblclick(row) {
      const data = {
        ...this.prevForm,
        orderStartDate: this.prevForm.startDate,
        orderEndDate: this.prevForm.endDate
      }
      delete data.startDate
      delete data.endDate
      this.$router.push({ path: `/report/saleReport/reportSalePromotion/${row.promotionId}`, query: data })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.flex {
  display: flex;
}

.fow-reverse {
  flex-direction: row-reverse;
}

.codeJump {
  color: blue;
}
</style>
